//最顶部的顶部栏  分为未登录和已登录两种
Vue.component("header-top", {
    props: [""],
    data: function() {
        return {
            topparams: {
                login: false,
                loginname: ""
            },
            location: ''
        }
    },
    template: `
    <div class="common_head-bg">
        <div class="common_head container">
            <div class="common_head-left" v-if="!topparams.login">
                <p>Hi，欢迎来到聚衣源</p>
                <!--<a v-if="" href="../index/login.html" title="请登录">请登录</a>-->
                <!--<a href="../index/registration.html" title="免费注册">免费注册</a>-->
                <a v-if="" :href="location+'/index/login.html'" title="请登录">请登录</a>
                <a :href="location+'/index/registration.html'" title="免费注册">免费注册</a>
            </div>
            <div class="common_head-left" v-if="topparams.login">
                <a :href="location+'/index/index1.html'" title="聚衣源首页">聚衣源首页</a>
                <div class="common_head-left-menu">
                    <p>{{topparams.loginname}}<i class="icon-head_top_arr"></i></p>
                    <div class="common_head-left-menu-sub">
                        <a href="#">账户管理</a>
                        <a @click="loginOut">退出</a>
                    </div>
                </div>
            </div>
            <div class="common_head-right">
                <!--<a href="http://www.juyiline.com/" title="买家中心">买家中心</a>-->
                <a href="javascript:void(0)" @click="buyUserCenter()" title="买家中心">买家中心</a>
                <a href="javascript:void(0)" @click="businessCenter()" title="卖家中心">卖家中心</a>
                <a href="javascript:void(0)" @click="designerIsMe()" title="我是设计师">我是设计师</a>
                <a href="javascript:void(0)" @click="companyEntry()" title="企业入驻">企业入驻</a>
                <a href="javascript:void(0)" @click="brandEntry()" title="品牌入驻">品牌入驻</a>
            </div>
        </div>
    </div>
    `,
    methods: {
        //点击退出 退出登录
        loginOut() {
            let that = this;
            axios({
                method: 'post',
                url: urlParam.domain() + '/api/user/loginOut',
                responseType: 'stream'
            }).then(function(r) {
                if (r.data.code == 1) {
                    //清除前端页面保存的用户登录信息
                    // sessionStorage.removeItem("user");
                    // sessionStorage.removeItem("loginName");
                    globalAPI.setCookie("username", "", -1);
                    globalAPI.setCookie("token", "", -1);
                    //跳转到登录页面
                    window.location.href = that.location + '/index/login.html';
                }
            });
        },
        init() {
            //判断用户是否登录
            if (globalAPI.readCookie("username")) {
                this.topparams.login = true; //显示登录状态
                var userName = globalAPI.readCookie("username"); //用户名
                var token = globalAPI.readCookie("token"); //token
                this.topparams.loginname = userName; //显示用户名
                //更新cookis过期时间 每次刷新页面都会更新
                globalAPI.setCookie("username", userName, 5);
                globalAPI.setCookie("token", token, 5);
            }
        },

        //买家中心
        buyUserCenter: function() {
            let token = urlParam.token();
            if (token == '') {
                this.$message({ message: '请先登录', type: 'warning' });
            } else {
                window.location.href = that.location + '/jusercenter/order_jdd.html';
            }
        },
        //卖家中心
        businessCenter: function() {
            let token = urlParam.token();
            if (token == '') {
                this.$message({ message: '请先登录', type: 'warning' });
            } else {
                window.location.href = that.location + '/jusercenter/order_jdd.html';
            }
        },
        //我是设计师
        designerIsMe: function() {
            let token = urlParam.token();
            if (token == '') {
                this.$message({ message: '请先登录', type: 'warning' });
            } else {
                window.location.href = this.location + "/jsheji/designer_join.html";
            }
        },
        //企业入驻
        companyEntry: function() {
            let token = urlParam.token();
            if (token == '') {
                this.$message({ message: '请先登录', type: 'warning' });
            } else {
                window.location.href = this.location + "/index/company_entry.html";
            }
        },
        //品牌入驻
        brandEntry: function() {
            let token = urlParam.token();
            if (token == '') {
                this.$message({ message: '请先登录', type: 'warning' });
            } else {
                window.location.href = this.location + "/index/pinpai_entry.html";
            }
        }
    },
    created: function() {
        this.location = urlParam.location();
        setTimeout(() => {
            this.init();
        }, 1000);
    }
});

/**
 * 会员退出

 function loginOut() {
    axios({
        method: 'post',
        url: urlParam.domain() + '/api/user/loginOut',
        responseType: 'stream'
    }).then(function(r) {
        if (r.data.code == 1) {
            sessionStorage.removeItem("user");
            sessionStorage.removeItem("loginName");
            window.location.href = '../index/login.html';
        }
    });
}
 */

//顶部全栈搜索栏
/*
type 如果没有，就没有顶部搜索框
follow:{ //关注
    id:0,//企业id
    cur:null,//是否关注的状态 null 未关注 非null 已关注
}
*/
Vue.component("header-search-global", {
    props: ["type", "follow", "companyname"], //id 企业id , companyName 企业名称
    data: function() {
        return {
            option: [
                { "text": "订单", "href": "订单", "placeholder": "搜索 聚订单 关键字", "btntext": "发布询盘", "btnhref": "/jdingdan/xunpan.html" },
                { "text": "设计", "href": "设计", "placeholder": "搜索 设计师 关键字", "btntext": "", "btnhref": "" },
                { "text": "企业", "href": "/jqiye/jqiye_list.html", "placeholder": "搜索 聚企业 关键字", "btntext": "企业入驻", "btnhref": "/index/company_entry.html" },
                { "text": "品牌", "href": "/jpinpai/pinpai_list.html", "placeholder": "搜索 聚品牌 关键字", "btntext": "品牌入驻", "btnhref": "" },
                { "text": "好款", "href": "好款", "placeholder": "搜索 聚好款 关键字", "btntext": "", "btnhref": "" },
                { "text": "服务", "href": "/jfuwu/list.html", "placeholder": "搜索 聚服务 关键字", "btntext": "发布需求", "btnhref": "/jfuwu/xuqiu.html" },
                { "text": "衣会", "href": "衣会", "placeholder": "搜索 聚衣会 关键字", "btntext": "", "btnhref": "" },
                { "text": "学院", "href": "学院", "placeholder": "搜索 聚学院 关键字", "btntext": "", "btnhref": "" },
                { "text": "商品", "href": "#", "placeholder": "输入商品名称进行搜索", "btntext": "搜本店", "btnhref": "" },
            ],
            optionindex: 0, //当前选中项 位置数
            optiontext: "", //当前选中项 文字
            searchtext: "", //搜索框中文字
            location: '',
            company:{}
                // option
        }
    },
    template: `
    <div class="common_head_search_global container">
        <a href="http://www.juyiline.com/" class="logo">
            <img src="../../img/logo.png" title="聚衣服饰">
            <div class="logo-right" v-if="type=='首页'"><img src="../../img/logo-right.png"></div>
        </a>
        <div class="goods_details" v-if="type=='商品'">
            <p>{{companyname}}</p>
            <div class="left-title-oper">
                <p @click="clickFollow"><i :class="follow.cur==null?'icon-header_follow':'icon-header_follow_cur'"></i>{{follow.cur==null?'关注':'已关注'}}</p>
                <div class="left-title-oper-qq"><i class="icon-header_qq"></i></div>
            </div>
        </div>
        <div class="search" v-if="type"><!-- 有些页面顶部不需要搜索框 比如个人中心 -->
            <div class="search-type" v-if="type=='首页'">
                <p>{{optiontext}}<i class="icon-top_search_arr"></i></p>
                <div class="search-type-option">
                    <p @click="clickSearchOption(index)" v-for="item,index in option" :class="{cur:(optiontext==item.text)}">{{item.text}}</p>
                </div>
            </div>
            <input :placeholder="option[optionindex].placeholder" v-model="searchtext">
            <button class="search-btn1" @click="clickIndexBtn">搜索</button>
            <a class="search-btn2" v-if=" type!='首页' && option[optionindex].btntext " @click="gobyhref($event,optionindex)" >{{option[optionindex].btntext}}</a>
        </div>
        <div class="right" v-if="type=='首页'">
            <p>下载聚衣APP</p>
            <img src="../../img/mobile_client.png">
        </div>
    </div>
    `,
    methods: {
        //点击下拉选项
        clickSearchOption(index) {
            this.optionindex = index;
            this.optiontext = this.option[index].text;
        },
        //点击 首页 顶部 搜索
        clickIndexBtn($event, data) {
            //打开对应页面，讲搜索框中的值用url传递
            // this.$emit('callback', this.searchtext);
            window.location.href = this.option[this.optionindex].href + "?q=" + this.searchtext;
        },
        //判断用户是否已登录
        gobyhref($event, data) {
            if (data == 2) {//企业入驻
                if (urlParam.token() == null || urlParam.token() == "") {
                    this.$message({ message: '请先登录', type: 'warning' });
                    return
                }
                //判断是否已入驻
                let that=this;
                axios.get(urlParam.domain()+"/api/company/company/getCompanyByUserIdPC",{
                    params:{
                        token:urlParam.token()
                    }
                }).then(function (response) {
                    if (response.data.code == 1) {
                        if (response.data.data != undefined) {
                            //console.log("---------");
                            //console.log(response.data.data);
                            that.company = response.data.data;
                            //console.log(that.company.status);
                            //1.未申请入驻，跳转企业入驻页面
                            if(that.company==null){
                                window.location.href = this.option[data].btnhref;
                            }else{
                                //2.已申请入驻，审核中  跳转审核进度页面 无后续 OK
                                if(that.company.status==0){
                                    window.location.href=urlParam.location()+"/index/company_entry_review.html"
                                }
                                //3.已申请入驻,审核成功  直接跳转企业详情 OK
                                if(that.company.status==1){
                                    //that.$message("入驻企业已申请成功");
                                    window.location.href=urlParam.location()+'/jqiye/jqiye_details.html?id='+that.company.id
                                }
                                //4.已申请入驻，审核失败 跳转审核页面 并可以再次提交 把数据库关于企业的内容改了
                                if(that.company.status==2){
                                    window.location.href=urlParam.location()+"/index/company_entry_review.html"
                                }
                            }
                        }
                    }
                });











            } else {
                window.location.href = urlParam.location() + this.option[data].btnhref; //跳转页面
                //this.$emit("callback")
            }
        },
        //商品 详情页 点击关注
        clickFollow() {
            console.log("点击关注", this.follow.cur);
            if (urlParam.token() == null || urlParam.token() == "") {
                this.$message({ message: '请先登录', type: 'warning' });
                return;
            }
            if (this.follow.cur == null) { //点击关注
                this.follow.cur = "asd";
                axios({
                    method: "post",
                    url: urlParam.domain() + '/api/company/companyFollow/add',
                    data: {
                        token: urlParam.token(),
                        companyId: this.follow.id
                    },
                    transformRequest: [function(data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(function(response) {});
            } else { //点击取消关注
                this.follow.cur = null;
                axios({
                    method: "post",
                    url: urlParam.domain() + '/api/company/companyFollow/deleteByCompanyAndUser',
                    data: {
                        token: urlParam.token(),
                        companyId: this.follow.id
                    },
                    transformRequest: [function(data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(function(response) {});
            }
        },
    },
    created() {
        this.location = urlParam.location();
        for (let obj of this.option) {
            obj.href = this.location + obj.href;
        }

        //获取 optionindex
        for (var i = 0; i < this.option.length; i++) {
            if (this.type == this.option[i].text) {
                this.optionindex = i;
                return;
            }
        }
        this.optiontext = this.option[this.optionindex].text;
    }
});

//品牌相关顶部
Vue.component("pinpai-header-top", {
    template: `
    <div class="bg-gray pinpai-header" v-if="obj">
        <div class="container pinpai-header-top">
            <div class="left-wrap">
                <img class="logo" :src="obj.logo">
                <div class="ppinfo">
                    <p class="ppname">{{obj.brandName}}</p>
                    <p class="date">成立时间：{{obj.foundingTime}}</p>
                    <p class="qyname">所属企业：{{obj.companyName}}</p>
                </div>
            </div>
            <div class="right-wrap">
                <span v-if="obj.followId!=null && obj.followId!=0" class="i-wrap" @click="doConcern(obj)">
                    <i class="icon-guanzhu g1"></i>已关注
                </span>
                <span v-if="obj.followId!=null && obj.followId==0" class="i-wrap" @click="doConcern(obj)">
                    <i class="icon-guanzhu g0"></i>关注
                </span>
                <span class="i-wrap" @click="share">
                    <i class="icon-share"></i>分享
                </span>
                <a :href="'../jpinpai/jiameng.html?id='+obj.id" class="btn">招商加盟</a>
                <a :href="'../jpinpai/contact_us.html?id='+obj.id" class="btn">联系我们</a>
            </div>
        </div>
    </div>
    `,
    data() {
        return {
            id: null,
            obj: null
        }
    },
    methods: {
        doConcern: function(data) {
            if (urlParam.token() == undefined || urlParam.token() == '') {
                this.$notify({
                    title: '错误',
                    message: "请先登录",
                    type: 'error'
                })
                return;
            }
            let followId = data.followId;
            if (followId == 0) {

            }
            let reqType = data.followId == 0 ? "add" : "delete";
            axios({
                method: "post",
                url: urlParam.domain() + "/api/brand/follow/" + reqType,
                headers: { "token": urlParam.token() },
                data: {
                    id: data.followId,
                    brandId: data.id,
                },
                transformRequest: [function(data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }]
            }).then(res => {
                if (reqType == "delete") {
                    data.followId = 0;
                } else {
                    data.followId = res.data.data;
                }
            }).catch(res => {
                console.log("doConcern fail!");
            })
        },
        share() {
            //    点击分享
            console.log("点击分享");
        }
    },
    created() {
        let that = this;
        this.id = globalAPI.getRequest().id;
        axios.get(urlParam.domain() + '/api/brand/brand/detail', {
            params: {
                id: that.id,
                token: urlParam.token()
            }
        }).then(function(response) {
            if (response.data.code == 1) {
                that.obj = response.data.data.brand;
            }
        });
    }
});

//通用顶部导航
Vue.component("common-top-nav", {
    props: ["cur"],
    template: `
    <div class="common_top_nav-bg">
        <div class="common_top_nav container">
            <ul>
                <li v-for="item in nav"><a :href="item.href" :class="{cur:item.text==cur}">{{item.text}}</a></li>
            </ul>
        </div>
    </div>
    `,
    data: function() {
        return {
            location: '',
            nav: [
                /*{ "text": "首页", "href": "../index/index1.html" },
                { "text": "聚订单", "href": "../jdingdan/list.html" },
                { "text": "聚设计", "href": "../jsheji/list.html" },
                { "text": "聚企业", "href": "../jqiye/i.html" },
                { "text": "聚品牌", "href": "../jpinpai/i.html" },
                { "text": "聚好款", "href": "../jhaokuan/i.html" },
                { "text": "聚服务", "href": "../jfuwu/list.html" },
                { "text": "聚衣会", "href": "../jyihui/i.html" },
                { "text": "聚学院", "href": "../jxueyuan/i.html" }*/

                { "text": "首页", "href": "/index/index1.html" },
                { "text": "聚订单", "href": "/jdingdan/list.html" },
                { "text": "聚设计", "href": "/jsheji/list.html" },
                { "text": "聚企业", "href": "/jqiye/i.html" },
                { "text": "聚品牌", "href": "/jpinpai/i.html" },
                { "text": "聚好款", "href": "/jhaokuan/i.html" },
                { "text": "聚服务", "href": "/jfuwu/list.html" },
                { "text": "聚衣会", "href": "/jyihui/i.html" },
                { "text": "聚学院", "href": "/jxueyuan/i.html" }
            ],
        }
    },
    created() {
        this.location = urlParam.location();
        for (let obj of this.nav) {
            obj.href = this.location + obj.href
        }
    },
});

//品牌通用顶部导航
Vue.component("common-top-nav1", {
    props: ["cur"],
    template: `
    <div class="common_top_nav-bg">
        <div class="common_top_nav nav1 container">
            <ul>
                <li v-for="item in nav"><a :href="item.href+'?id='+id" :class="{cur:item.text==cur}">{{item.text}}</a></li>
            </ul>
        </div>
    </div>
    `,
    data: function() {
        return {
            id: null,
            nav: [
                { "text": "品牌介绍", "href": "./pinpai_detail.html" },
                { "text": "新品上市", "href": "./xinpin_list.html" },
                { "text": "品牌动态", "href": "./dongtai.html" },
                { "text": "形象展示", "href": "./xx_show.html" },
                { "text": "招商加盟", "href": "./jiameng.html" },
                { "text": "联系我们", "href": "./contact_us.html" }
            ],
        }
    },
    created() {
        this.id = globalAPI.getRequest().id;
    },
});

//通用页脚
Vue.component("common-footer", {
    template: `
    <div>
    <div class="common_footer_top-bg">
        <div class="common_footer_top container">
            <div class="common_footer_top-top">
                <div class="common_footer_top-top-col">
                    <div class="common_footer_top-top-col-img"><img src="../../img/footer_top_icon1.png"></div>
                    <div class="common_footer_top-top-col-text">
                        <h1>海量正品低价</h1>
                        <p>正品行货 品质保障</p>
                    </div>
                </div>
                <div class="common_footer_top-top-col">
                    <div class="common_footer_top-top-col-img"><img src="../../img/footer_top_icon2.png"></div>
                    <div class="common_footer_top-top-col-text">
                        <h1>商品品类齐全</h1>
                        <p>品类齐全 选择丰富</p>
                    </div>
                </div>
                <div class="common_footer_top-top-col">
                    <div class="common_footer_top-top-col-img"><img src="../../img/footer_top_icon3.png"></div>
                    <div class="common_footer_top-top-col-text">
                        <h1>超强品质保障</h1>
                        <p>专属客服跟进 让您满意</p>
                    </div>
                </div>
            </div>
            <div class="common_footer_top-bottom">
                <div class="common_footer_top-bottom-nav">
                    <dl>
                        <dt><i class="icon-footer_con_icon1"></i>新手上路</dt>
                        <dd><a href="#">免费注册</a></dd>
                        <dd><a href="#">买家入门</a></dd>
                        <dd><a href="#">卖家入门</a></dd>
                        <dd><a href="#">设计师入门</a></dd>
                    </dl>
                    <dl>
                        <dt><i class="icon-footer_con_icon2"></i>交易安全</dt>
                        <dd><a href="#">交易维权</a></dd>
                        <dd><a href="#">买家防骗</a></dd>
                        <dd><a href="#">卖家防骗</a></dd>
                    </dl>
                    <dl>
                        <dt><i class="icon-footer_con_icon3"></i>联系聚衣</dt>
                        <dd>邮箱：763134348@qq.com</dd>
                        <dd>地址：南京市建邺区庐山路</dd>
                    </dl>
                </div>
                <div class="common_footer_top-bottom-infor">
                    <h1>025-5760-0581</h1>
                    <p>周一至周五：09:00~17:30</p>
                </div>
                <div class="common_footer_top-bottom-third">
                    <div class="left">
                        <h1>移动客户端</h1>
                        <div class="left-img"><img src="../../img/mobile_client.png"></div>
                    </div>
                    <div class="right">
                        <div class="right-col"><i class="icon-footer_weixin"></i>官方微信</div>
                        <div class="right-col"><i class="icon-footer_weibo"></i>官方微博</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="common_footer_btm-bg">
        <div class="common_footer_btm container">
            <p>Copyright© 2002-2017 江苏聚衣网络科技有限公司 版权所有 苏ICP备10207551号-4</p>
            <div class="common_footer_btm-nav">
                <a href="#"><img src="../../img/footer_btm_icon1.png"></a>
                <a href="#"><img src="../../img/footer_btm_icon2.png"></a>
                <a href="#"><img src="../../img/footer_btm_icon3.png"></a>
                <a href="#"><img src="../../img/footer_btm_icon4.png"></a>
            </div>
        </div>
    </div>
    </div>
    `
});

//登录 注册 页面的头部
Vue.component("common-login-head", {
    props: ["text"],
    template: `
    <div class="login_top container">
        <div class="login_top-left">
            <a class="login_top-left-logo" href="http://www.juyiline.com" target="_blank"><img src="../../img/logo.png" title="聚衣源"></a>
            <h1>{{text}}</h1>
        </div>
    </div>
    `
});

//登录 注册 页面的页脚
Vue.component("common-login-footer", {
    props: [""],
    template: `
    <div class="common_login_footer container">
        <ul>
            <li><a href="#">关于我们</a></li>
            <li>|</li>
            <li><a href="#">联系我们</a></li>
            <li>|</li>
            <li><a href="#">用户协议</a></li>
            <li>|</li>
            <li><a href="#">隐私策略</a></li>
            <li>|</li>
            <li><a href="#">法律声明</a></li>
            <li>|</li>
            <li><a href="#">友情链接</a></li>
        </ul>
        <p>Copyright © 20017-2018 juyiline.com 版权所有 苏ICP备10207551号-4</p>
    </div>
    `
});


Vue.component("common-map", {
        props: ["address"],
        template: `<div id ="allmap" style="width:960px;height: 300px;"></div>`,
        methods: {
            getMap() {
                var map = new BMap.Map("allmap");
                var point = new BMap.Point(116.331398, 39.897445);
                map.centerAndZoom(point, 12);
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(this.address, function(point) {
                    if (point) {
                        map.centerAndZoom(point, 12);
                        map.addOverlay(new BMap.Marker(point));
                    } else {
                        alert("您选择地址没有解析到结果!");
                    }
                }, "南京市");
                map.enableScrollWheelZoom(true);
            }
        },
        mounted() {
            this.getMap();
        }
    })
    //上传图片
    /*
    注意事项：
    1.
        preimg是一个对象
        preimg:{
            base64:[""],//这个 preimg.base64 才是 预览图
            url: [""], //最后ajax提交表单信息时，提交的url路径，这个是单张图片上传完毕后台返回的url路径
        }
        这是因为vue2中不允许组件更改vue实例中的data，做出的决定
        vue实例中data的
        companyLogo: {
            base64: [""], //企业 logo base64码
            url: [""], //最后ajax提交表单信息时，提交的url路径，这个是单张图片上传完毕后台返回的url路径
        }
        companyLogo可以更改，随意起名，但是里面的 base64: [""] 不可更改
    2.
        因为预计用预览图的base64码上传图片，所以最好还是限制图片的体积为好
    3.
        因为提示框使用了element ui 所以 需要引入相应的js与css
    */
    /*
    testOption 为验证图片的验证项 格式为josn 不设置的就不会验证 图片格式必须验证
    testOption:{
        //type:function,//图片的格式 项目中统一为 jpg png 在 globalAPI.testImgType 中已经设置
        minwidth:100,//图片最小宽 不能小于 可以等于
        minheight:100,//图片最小高
        maxwidth:100,//图片最大高 不能大于 可以等于
        maxheight:100,//图片最大高
        width:100,//图片宽 必须相等
        height:100,//图片高
        volume:1024,//图片体积 单位是kb 1024就是指 1MB
        maxlength:1,//限制图片的数量 不设置默认为1
        proportion:1,//限制图片的宽高比例 为 宽:高
    }
    */
Vue.component("common-upimg", {
    props: ["preimg", "testoption"],
    template: `<div class="common_upimg-box">
        <div class="common_upimg" v-for="item,index in preimg.base64">
            <input type="file" accept="image/*" @change="chooseLogo($event,index)" v-show="!item">
            <img :src="item?item:'../../img/company_entry_upimg.png'">
            <div class="common_upimg-remove" title="删除" v-show="item" @click="clickRemove($event,index)"><div></div></div>
        </div>
        <!-- 提示框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="400px">
            <span>{{dialogTitle}}</span>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisible = false">{{dialogBtnText}}</el-button>
            </span>
        </el-dialog>
    </div>`,
    data: function() {
        return {
            //提示文字
            dialogVisible: false, //控制 显示、隐藏提示框
            dialogTitle: "", //提示框 标题
            dialogBtnText: "", //提示框 按钮文字
            ajaxurl: urlParam.domain() + "/api/upload", //上传图片ajax接口
        }
    },
    methods: {
        //显示提示框 接受josn格式的参数
        //showdialog({title:"",btnText:""})
        showdialog(josn) {
            this.dialogVisible = true; //显示
            this.dialogTitle = josn.title; //标题
            this.dialogBtnText = josn.btnText; //按钮文字
        },
        //选择图片 验证图片 验证成功后预览图片
        //先验证文件格式 文件大小 最后 验证图片尺寸 
        chooseLogo(e, index) {
            var testoption = this.testoption; //验证项
            var that = this; //that指向vue实例
            var fileInput = e.currentTarget; //用于 清除input中的文件
            //验证失败 清除 input file 里的文件
            var failTest = function() {
                fileInput.value = "";
            };
            //验证成功 显示预览图 判断是否增加下一个上传图片input 保存ajax返回的图片路径
            var successTest = function(base64) {
                fileInput.value = ""; //不管成不成功都删除input里的文件
                if (that.ajaxurl) {
                    //ajax上传单张图片
                    axios({
                        method: 'post',
                        url: that.ajaxurl,
                        data: {
                            base64: base64
                        },
                        transformRequest: [function(data) {
                            let ret = ''
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            return ret
                        }]
                    }).then(function(res) { //成功上传 返回图片路径
                        Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                        //判断是否增加下一个上传图片input
                        if (that.preimg.base64.length < that.testoption.maxlength) {
                            that.preimg.base64.push("");
                        };
                        that.preimg.url[index] = res.data.data; //保存图片路径
                    }).catch(function(error) { //上传失败 提示
                        that.showdialog({ title: "上传失败，可能是网速原因，请再次上传", btnText: "好 的" });
                    });
                } else {
                    Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                    //判断是否增加下一个上传图片input
                    if (that.preimg.base64.length < that.testoption.maxlength) {
                        that.preimg.base64.push("");
                    };
                    console.log("注意，没有ajax上传，现在仅为前端测试");
                }
            };
            //验证图片格式
            var imgtype = fileInput.value.split(".");
            imgtype = imgtype[imgtype.length - 1]; //获取文件后缀
            if (!globalAPI.testImgType(imgtype)) {
                this.showdialog({ title: "您的文件格式不符", btnText: "好 的" });
                failTest();
                return;
            }
            var file = fileInput.files[0]; //得到input file 里的文件对象file
            //如果需要验证图片的体积
            if (testoption.volume) {
                //验证文件大小
                var size = file.size; //上传 文件 的大小 单位byte
                //图片大小限制为20kb以内
                if (size > testoption.volume * 1024) {
                    this.showdialog({
                        title: "您的图片体积为" + (size / 1024).toFixed(2) + "kb，超过" + testoption.volume + "kb限制",
                        btnText: "好 的"
                    });
                    failTest();
                    return;
                };
            }
            //获取图片base64码
            var reader = new FileReader();
            reader.readAsDataURL(file); //传入文件对象file
            reader.onload = function(e) { //读取 文件对象file 完成
                var base64 = e.target.result; //文件对象file 图片base64码
                //console.log("base64", base64);
                //如果不需要验证图片尺寸
                if (!(testoption.minwidth || testoption.minheight || testoption.maxwidth || testoption.maxheight || testoption.width || testoption.height)) {
                    successTest(base64);
                    return;
                }
                //创建一个隐藏的 img 标签
                document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", `<img src="" id="imgsize" style="display:none;">`);
                var imgHide = document.getElementById("imgsize"); //隐藏的img标签，用于获取图片尺寸
                imgHide.src = base64;
                imgHide.onload = function() { //图片加载完成 此隐藏图片用来获取图片尺寸
                    var width = imgHide.width; //图片宽
                    var height = imgHide.height; //图片高
                    imgHide.remove(); //将创建的隐藏的 img 标签删除
                    //验证 图片尺寸
                    //验证 图片最小宽度
                    if (testoption.minwidth) {
                        if (width < testoption.minwidth) { //图片宽度小于最小宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最小高度
                    if (testoption.minheight) {
                        if (height < testoption.minheight) { //图片宽高度小于最小高度 验证失败
                            that.showdialog({ title: "您的图片高度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大宽度
                    if (testoption.maxwidth) {
                        if (width > testoption.maxwidth) { //图片宽度大于最大宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大高度
                    if (testoption.maxheight) {
                        if (height > testoption.maxheight) { //图片高度大于最大高度 验证失败
                            that.showdialog({ title: "您的图片高度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽度
                    if (testoption.width) {
                        if (width != testoption.width) {
                            that.showdialog({ title: "您的图片宽度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片高度
                    if (testoption.height) {
                        if (height != testoption.height) {
                            that.showdialog({ title: "您的图片高度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽高比例
                    if (testoption.proportion) {
                        if ((width / height) != testoption.proportion) {
                            that.showdialog({ title: "您的图片宽高比例不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //通过验证 显示预览图
                    successTest(base64);
                }
            }
        },
        //点击删除
        clickRemove(e, index) {
            this.preimg.base64.splice(index, 1); //删除预览图
            this.preimg.url.splice(index, 1); //删除图片路径
            //必须保证有一个上传图片 如果没有预览图了，或者最后一个预览图里有值，就添加一个上传图片项
            if (this.preimg.base64.length == 0 || this.preimg.base64[this.preimg.base64.length - 1]) {
                this.preimg.base64.push("");
                this.preimg.url.push("");
            }
        },
    },
    created() {
        if (!this.testoption.maxlength) { //不设置默认为1 单张图片上传
            this.testoption.maxlength = 1;
        }
    }
});

//路径导航
/*
crumblist:[{
    text:"",
    href:"",
}]
*/
Vue.component("common-crumb", {
    props: ["crumblist"], //:href="index < (crumblist.length-1) && item.href" 暂时不跳转
    template: `
    <div class="common_crumb container">
        <ul>
            <li v-for="(item,index) in crumblist">
                <a :title="item.text">{{item.text}}</a>
                <span class="font-arr" v-if="index < (crumblist.length-1)">></span>
            </li>
        </ul>
    </div>
    `
});

//路径导航
Vue.component("common-crumb1", {
    props: ["crumblist"],
    template: `
    <div class="common_crumb container">
        <ul>
            <li v-for="(item,index) in crumblist.crumb">
                <a v-if="index < (crumblist.crumb.length)" :href="item.href" :title="item.text">{{item.text}}</a>
                <span class="font-arr" v-if="index < (crumblist.crumb.length)">></span>
            </li>
            <li v-for="q,i in crumblist.arr">
                <a class="qlist" @click="delArr(i)">{{q.title}}：{{q.name}}<i class="icon-delete"></i></a>                
            </li>
        </ul>
    </div>
    `,
    methods: {
        delArr(index) {
            this.crumblist.arr.splice(index, 1);
            this.$emit('callback', this.crumblist);
        }
    }
});

//分页
Vue.component("common-page", {
    props: ['current', 'all'],
    template: `
    <div class="page-bar">
    <ul>
      <li><a :class="[ setButtonClass(0) ]" @click="prvePage(cur)">上一页</a></li>
      <li v-for="index in indexs" :class="{ active: cur == index }">
         <a @click="btnClick(index)">{{ index < 1 ? "..." : index }}</a>
      </li>
      <li><a :class="[ setButtonClass(1) ]" @click="nextPage(cur)">下一页</a></li>
      <li class="page-info">共{{all}}页 到第<input v-model="userpage">页 </li>
      <li><a @click="btnClick(parseInt(userpage))">确定</a></li>
    </ul>
  </div>
    `,
    data() {
        return {
            cur: this.current,
            num: 30,
            limit: 5,
            userpage: ''
        }
    },
    methods: {
        // 页码点击事件
        btnClick: function(data) {
            if (data < 1) return;
            if (data != this.cur) {
                this.cur = data
                this.$emit('btn-click', data)
            }
        },
        // 下一页
        nextPage: function(data) {
            if (this.cur >= this.all) return;
            this.btnClick(this.cur + 1);
        },
        // 上一页
        prvePage: function(data) {
            if (this.cur <= 1) return;
            this.btnClick(this.cur - 1);
        },
        // 设置按钮禁用样式
        setButtonClass: function(isNextButton) {
            if (isNextButton) {
                return this.cur >= this.all ? "page-button-disabled" : ""
            } else {
                return this.cur <= 1 ? "page-button-disabled" : ""
            }
        }
    },
    computed: {
        indexs: function() {
            var left = 1
            var right = this.all
            var ar = []
            if (this.all >= 11) {
                if (this.cur > 5 && this.cur < this.all - 4) {
                    left = this.cur - 5
                    right = this.cur + 4
                } else {
                    if (this.cur <= 5) {
                        left = 1
                        right = 10
                    } else {
                        right = this.all
                        left = this.all - 9
                    }
                }
            }
            while (left <= right) {
                ar.push(left)
                left++
            }
            if (ar[0] > 1) {
                ar[0] = 1;
                ar[1] = -1;
            }
            if (ar[ar.length - 1] < this.all) {
                ar[ar.length - 1] = this.all;
                ar[ar.length - 2] = 0;
            }
            return ar
        }
    }
});

// 轮播图
let common_swiper = {
    props: ['bannerlist'],
    template: `<div class="swiper-container swiper-container-banner">
        <div class="swiper-wrapper">
            <a class="swiper-slide" v-for="item in bannerlist" :href="item.link">
                <img :data-src="item.picUrl" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </a>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>`,
    methods: {
        initSwipterBanner() {
            var swiper = new Swiper('.swiper-container-banner', {
                loop: true, //让Swiper看起来是循环的。
                effect: 'fade', //默认为" slide "（位移切换），可设置为" fade " 淡入 "  cube " 方块  " coverflow " 3d流  " flip " 3d翻转 。
                speed: 1000,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止
                },
                pagination: { //分页器
                    el: '.swiper-pagination', //设置分页器，默认null
                    type: 'bullets', //分页器样式类型 ‘bullets’  圆点（默认）‘fraction’  分式  ‘progress’  进度条
                    clickable: true, //点击分页器的指示点分页器会控制Swipe
                },
                lazy: { //图片延迟加载
                    loadPrevNext: true,
                },
                // preloadImages: true,
                // updateOnImagesReady: true,
            });
            console.log("初始化swiper");
        },
    },
    mounted() {
        this.initSwipterBanner();
    },
    updated() {
        this.initSwipterBanner();
    },
}

// 公共标题-聚品牌首页等页面
let common_biaoti = {
    props: ['obj'],
    template: `<div class="jpinpai-title">
        <p class="title-zh">{{obj.zh}}</p>
        <p class="title-en">{{obj.en}}</p>
    </div>`
}

// 产品列表-聚好款首页等页面
let base_pro_list = {
    props: ['list'],
    template: `<div class="base-pro-list">
        <div class="base-item" v-for="item in list">
        <a :href="location+'/jhaokuan/jhaokuan_goods_details.html?id='+item.id">
            <img :src="item.picUrl">
            <p class="price-wrap">
                <span class="price"><span class="unit">￥</span>{{item.unitPrice}}</span>
                <span class="mincount">起批量{{item.minNum}}件</span>
            </p>
            <p class="title">{{item.goodsName}}</p>
        </a>
        </div>
    </div>`,
    data() {
        return {
            location: urlParam.location()
        }
    }
}

// 产品列表-分类搜索
let shaixuan_bar = {
    props: ['catelist', 'where'],
    template: `<div class="shaixuan-bar">
    <div class="catetype-wrap">
        <div class="catetype" v-for="item in catelist">
            <span>{{item.title}}：</span> 
            <a @click="setCate(item.catename,type.id)" v-for="type in item.attr" :class="{'active':where['cateobj'][item.catename]==type.id}">{{type.name}}</a>
        </div>
    </div>
    <div class="fenlei">
        <div><span class="fl-item">所有地区<i class="icon-arr-down"></i></span></div> 
        <div><span class="fl-item">员工人数<i class="icon-arr-down"></i></span></div> 
        <div class="price-wrap">
            <span class="price">￥<input v-model="where.minprice" placeholder="最低价"></span>-
            <span class="price">￥<input v-model="where.maxprice" placeholder="最高价"></span>
            <button class="sure" @click="getWhere">确定</button>
        </div>
        <div class="price-wrap">
            <span class="qipi">起批量：</span>
            <span class="price"><input v-model="where.mincount"></span>以上
            <button class="sure" @click="getWhere">确定</button>
        </div>
     </div>
     </div>`,
    methods: {
        getWhere() {
            //console.log(this.where.minprice)
            this.$emit('callback', this.where)
        },
        setCate(catename, id) {
            this.where.cateobj[catename] = id;
            console.log(this.where.cateobj[catename]);
            this.$emit('callback', this.where)
        },
    }
}

// 产品列表-分类搜索
/* 
catelist 条件选项 数组
catelist : [{
    catename:"",//ajax 发送的参数名称 fenlei:"fenlei"
    title:"",//前面的标题
    arr:[{//后面的选项
        labelId:"",
        labelName:"",
    }],
    
}]
where 选中的搜索条件
where:{
    minage:"",//消费人群 最小年龄
    maxage:"",//最大年龄
    daterange:"",//成立时间
    cateobj:{//
        catename:catename,//
        title:"品牌风格"//选项对应的标题
        name:"日韩风格"//选项文字
        val:2//选项对应的id
    }
}
*/
let jpp_pp_shaixuan_bar = {
    props: ['catelist', 'where'],
    template: `
    <div class="jpp-pp-shaixuan-bar">
        <div class="catetype-wrap">
            <div class="catetype" v-for="item in catelist">
                <span class="biaoqian">{{item.title}}：</span> 
                <a @click="setCate(item.catename,item.title,type.labelId,type.labelName)" v-for="type in item.arr" :class="{'active':where['cateobj'][item.catename]==type.labelId}">{{type.labelName}}</a>
            </div>
            <div class="catetype">
                <span class="biaoqian">消费人群：</span> 
                <div class="renqun-wrap">
                    <input v-model="where.minage"><span>-</span><input v-model="where.maxage"><span>岁</span>
                    <button @click="getWhere">确定</button>
                    <button>清除</button>
                </div>
            </div>
            <div class="catetype">
                <span class="biaoqian">成立时间：</span> 
                <div class="date-wrap">
                    <el-date-picker v-model="where.daterange" value-format="yyyy-MM-dd" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <button @click="getWhere">确定</button>
                    <button>清除</button>
                </div>
            </div>
        </div>
    </div>`,
    methods: {
        //点击确定
        getWhere() {
            this.$emit('callback', this.where)
        },
        //点击条件搜索选项
        setCate(catename, title, val, name) {
            this.where.cateobj[catename] = catename;
            this.where.cateobj['title'] = title;
            this.where.cateobj['val'] = val;
            this.where.cateobj['name'] = name;
            this.$emit('callback', this.where)
        },
    }
}

// 文章详情页
let base_article = {
    props: ['article'],
    template: `<div>
        <div class="article-head">
            <div class="left-wrap">
                <img class="toux" v-for="pic,index in article.picUrl" :src="pic.fileUrl" v-if="index<1">
                <div>
                    <p class="name">{{article.title}}</p>                    
                    <slot name='date'></slot>
                </div>
            </div>
            <slot name='shouc'></slot>
        </div>
        <div class="article-bottom">
            <p class="article-title">{{article.title}}</p>
            <slot name='author'></slot>
            <p class="article-content" v-html="article.content"></p>
            <slot name='location'></slot>
            <slot name='baoming'></slot>
        </div>
        <slot name="comment"></slot>
    </div>`
}

// 个人中心：左侧边栏
Vue.component('leftnav', {
    props: ["navtext"], //active
    template: `
        <div class="user-leftNav">
            <dl v-for="item in nav">
                <dt><i :class="item.icon"></i> {{item.title}}</dt>
                <dd v-for="subitem in item.navList"><a :class="{'active':subitem.text==navtext}" :href="subitem.href">{{subitem.text}}</a></dd>
            </dl>
        </div>
    `,
    data() {
        return {
            nav: [{
                title: "我的订单",
                icon: "icon-house",
                navList: [{
                    text: "聚订单",
                    href: "#"
                }, {
                    text: "聚服务",
                    href: "#"
                }]
            }, {
                title: "我的企业",
                icon: "icon-house",
                navList: [{
                    text: "企业入驻",
                    href: "Enterprise.html"
                }, {
                    text: "企业管理",
                    href: "Enterprise_info.html"
                }, {
                    text: "企业客服",
                    href: "Enterprise_customer.html"
                }, ]
            }, {
                title: "我的品牌",
                icon: "icon-zs",
                navList: [{
                    text: "品牌入驻",
                    href: "brand_join.html"
                }, {
                    text: "品牌管理",
                    href: "branding.html"
                }, {
                    text: "品牌加盟",
                    href: "brand_details.html"
                }, ]
            }, {
                title: "聚好款",
                icon: "icon-bao",
                navList: [{
                    text: "发布商品",
                    href: "add_goods.html"
                }, {
                    text: "商品管理",
                    href: "goods.html"
                }, {
                    text: "店铺商品分类",
                    href: "goodsType.html"
                }, ]
            }, {
                title: "关注/收藏中心",
                icon: "icon-xin",
                navList: [{
                    text: "关注我的企业",
                    href: "focus.html#5"
                }, {
                    text: "我关注的企业",
                    href: "focus.html#4"
                }, {
                    text: "我关注的店铺",
                    href: "focus.html#3"
                }, {
                    text: "我关注的品牌",
                    href: "focus.html#2"
                }, {
                    text: "我收藏的商品",
                    href: "focus.html#1"
                }, ]
            }, {
                title: "消息通知",
                icon: "icon-notify",
                navList: [{
                    text: "系统通知",
                    href: "System.html"
                }]
            }],
        }
    },
})

Vue.filter('date', function(value) {
    if (value == '') return '';
    var d = new Date(value);
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();

    return year + '-' + month + '-' + day;
});

//聚好款_商品详情 顶部导航栏
Vue.component('jhaokuan-goods-details-topnav', {
    props: ["navlist"],
    template: `
    <div class="common_jhaokuan_goods_details_topnav-bg">
        <div class="common_jhaokuan_goods_details_topnav container">
            <ul>
                <li v-for="item in navlist"><a :href="item.href">{{item.text}}</a></li>
            </ul>
        </div>
    </div>
    `,

})

// 文章页：左侧边栏
Vue.component('leftnav1', {
    props: ["navtext"], //active
    template: `
        <div class="user-leftNav leftNav1">
            <dl v-for="item in nav">
                <dt>{{item.title}}</dt>
                <dd v-for="subitem in item.navList"><a :class="{'active':subitem.text==navtext}" :href="subitem.href">{{subitem.text}}</a></dd>
            </dl>
        </div>
    `,
    data() {
        return {
            nav: [{
                title: "新手上路",
                navList: [{
                    text: "免费注册",
                    href: "#"
                }, {
                    text: "买家入门",
                    href: "#"
                }, {
                    text: "卖家入门",
                    href: "#"
                }, {
                    text: "设计师入门",
                    href: "#"
                }]
            }, {
                title: "交易安全",
                navList: [{
                    text: "交易维权",
                    href: ""
                }, {
                    text: "买家防骗",
                    href: "Enterprise.html"
                }, {
                    text: "卖家防骗",
                    href: "Enterprise_customer.html"
                }, ]
            }],
        }
    },
})